<template>
    <div class="user-header">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-form :inline="true" :model="formInline">
            <el-form-item label="请输入">
                <el-input placeholder="请输入用户名" v-model="formInline.keyWord"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="table">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column
                v-for="item in tableLabel"
                :key="item.prop"
                :width="item.width ? item.width : 125"
                :prop="item.prop"
                :label="item.label"
            />
            <el-table-column fixed="right" label="Operations" min-width="120">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleEdit(scope.row)">
                        编辑
                    </el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pager"
            background 
            layout="prev, pager, next"
            size="small"
            :total="config.total"
            @current-change="handleChange"
        />
    </div>

    <el-dialog
        v-model="dialogVisible"
        :title="action == 'add' ? '新增用户' : '编辑用户'"
        width="35%"
        :before-close="handleClose"
    >
       <!--需要注意的是设置了:inline="true"，
		会对el-select的样式造成影响，通过给他设置一个style="display: flex;"在css进行处理-->
        <el-form :inline="true" :model="formUser" :rules="rules" ref="userForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="formUser.name" placeholder="请输入姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" prop="age">
                        <el-input v-model.number="formUser.age" placeholder="请输入年龄" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex" style="display: flex;">
                        <el-select  v-model="formUser.sex" placeholder="请选择">
                            <el-option label="男" value="1" />
                            <el-option label="女" value="0" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出生日期" prop="birth">
                        <el-date-picker
                            v-model="formUser.birth"
                            type="date"
                            placeholder="请输入"
                            style="width: 100%"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item
                    label="地址"
                    prop="addr"
                >
                    <el-input v-model="formUser.addr" placeholder="请输入地址" />
                </el-form-item>
            </el-row>
            <el-row style="justify-content: flex-end">
                <el-form-item>
                    <el-button type="primary" @click="handleCancel">取消</el-button>
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                </el-form-item>
            </el-row>
        </el-form>
    </el-dialog>
</template>

<script setup>
import {ref, getCurrentInstance, onMounted, reactive, nextTick} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'

const { proxy } = getCurrentInstance()
const formInline = reactive({
    keyWord: ''
})
const tableData = ref([])
const tableLabel = reactive([
    {
        prop: 'name',
        label: '姓名'
    },
    {
        prop: 'age',
        label: '年龄'
    },
    {
        prop: 'sexLabel',
        label: '性别'
    },
    {
        prop: 'birth',
        label: '出生日期',
        width: 200
    },
    {
        prop: 'addr',
        label: '地址',
        width: 400
    }
])
const config = reactive({
    name: '',
    total :0,
    page: 1
})
//新增和编辑共用一个窗口，所以通过设置action区分
const action = ref("add")
//控制对话框是否显示
const dialogVisible = ref(false)
const formUser = reactive({})
//表单校验规则
const rules = reactive({
    name: [{ required: true, message: "姓名是必填项", trigger: "blur" }],
    age: [
        { required: true, message: "年龄是必填项", trigger: "blur" },
        { type: "number", message: "年龄必须是数字" },
    ],
    sex: [{ required: true, message: "性别是必选项", trigger: "change" }],
    birth: [{ required: true, message: "出生日期是必选项" }],
    addr:[{ required: true, message: '地址是必填项' }]
})

const getUserData = async ()=> {
    let data = await proxy.$api.getUserData(config)
    console.log('getUserData=',data)
    tableData.value = data.list.map(item => ({
        ...item,  // ...  es6语法  数据解构
        sexLabel : item.sex === '1' ? '男' : '女'
    }))
    config.total = data.count
}
const handleSearch = () => {
    config.name = formInline.keyWord
    getUserData()
}
const handleDelete = (row) => {
    ElMessageBox.confirm('你确定要删除吗？').then(async () => {
        await proxy.$api.deleteUser({id: row.id})
        ElMessage({
            showClose: true,
            message: '删除成功',
            type: 'success'
        })
        getUserData()
    })
}
const handleChange = (page) => {
    config.page = page
    getUserData()
}
// 新增
const handleAdd = () => {
    action.value = "add"
    //打开对话窗
    dialogVisible.value=true
}
// 编辑
const handleEdit = (row) => {
    action.value = "edit"
    dialogVisible.value = true
    
    nextTick(()=>{
        // 因为在第一次显示弹窗的时候form组件没有加载出来，如果直接对formUser赋值，这个值会作为form表单的初始值
        // 所以使用nextTick，赋值的操作在一个微任务中，这样就可以避免在from表单加载之前赋值
       
        Object.assign(formUser,{...row, sex : " " + row.sex})
        // 这里需要改变sex数据类型，是因为el-option的value有类型的校验
    })
    dialogVisible.value = true
}
//对话框右上角的关闭事件
const handleClose = () => {
    // 获取到表单dom，执行resetFields重置表单
    proxy.$refs["userForm"].resetFields()
    dialogVisible.value = false
}
// 对话框右下角的确定事件
const onSubmit = () => {
    // 执行userForm表单的validate进行规则校验，传入一个回调函数，回调函数会接受到一个是否校验通过的变量
    proxy.$refs["userForm"].validate(async (valid)=>{
        if (valid) {
            // res用于接收添加用户或者编辑用户接口的返回值
            let res = null
            // 如果当前的操作是新增，则调用新增接口
            if (action.value == "add") {
                res = await proxy.$api.addUser(formUser);
            }else if(action.value == "edit"){
                res = await proxy.$api.editUser(formUser)
            }
            // 如果接口调用成功
            if(res){
                // 关闭对话框，重置表单，重新请求用户数据
                dialogVisible.value = false;
                proxy.$refs["userForm"].resetFields()
                getUserData()
            }
        }else {
            ElMessage({
                showClose: true,
                message: "请输入正确的内容",
                type: "error",
            })
        }
    })
}
// 对话框右下角的取消事件
const handleCancel = () => {
    proxy.$refs["userForm"].resetFields()
    dialogVisible.value = false
}

onMounted(() => {
    getUserData()
})
</script>

<style lang="less" scoped>
.user-header {
    display: flex;
    justify-content: space-between;
}
.table {
    position: relative;
    height: 520px;
    .pager {
        position: absolute;
        right: 10px;
        bottom: 30px;
    }
    .el-table {
        width: 100%;
        height: 500px;
    }
}
</style>